<template>
  <div class="books">
    <my-header>
      <template #left>
        <span @click="$router.go(-1)">返回</span>
      </template>
      <template #title>
        <span>我的书架</span>
      </template>
      <template #button> </template>
    </my-header>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="正在看" name="1">
        <ul class="con">
          <li
            v-for="item in collection"
            v-show="item.state == 0"
            :key="item.id"
          >
            <p>{{ item.name }}</p>
            <div>
              <span @click="item.state = 1">标记已看完</span>|
              <span @click="remove(item.id)">删除图书</span>
            </div>
          </li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="已完结" name="2">
        <ul class="con">
          <li
            v-for="item in collection"
            v-show="item.state == 1"
            :key="item.id"
          >
            <p>{{ item.name }}</p>
            <div>
              <span @click="item.state = 0">再看一遍</span>|
              <span @click="remove(item.id)">删除图书</span>
            </div>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1", "2"],
    };
  },
  methods: {
    remove(id) {
      this.$store.commit("remove", id);
    },
    //删除的方法
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    collection() {
      return this.$store.state.collection;
    },
    //拿到vuex里的收藏的数据
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.books {
  .con {
    li {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
